<?php
session_start();
include_once 'Nav.php';
$id = $_GET['id'];
$article = "SELECT * FROM article WHERE id=$id limit 1";
$resarticle = mysqli_query($connect, $article);
$mod = mysqli_fetch_array($resarticle);
?>

<link href="/admin/editormd/css/editormd.css" rel="stylesheet">
<style>
.custom-file-input:lang(zh) ~ .custom-file-label::after {
    content: "浏览";
}

/* 添加拖放区域样式 */
.editor-content.dragover {
    background-color: #f8f9fa;
    border: 2px dashed #007bff;
}

/* 图片预览区域样式 */
#imagePreview {
    min-height: 50px;
    border: 2px dashed #ddd;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

#imagePreview img {
    transition: transform 0.2s;
    cursor: pointer;
    max-height: 100px;
    margin: 0;
}

#imagePreview .position-relative {
    transition: all 0.2s;
    margin: 5px;
    position: relative;
}

#imagePreview .position-relative:hover {
    transform: scale(1.05);
}

#imagePreview .img-delete-btn,
#imagePreview .img-insert-btn {
    display: none;
}

#imagePreview .position-relative:hover .img-delete-btn,
#imagePreview .position-relative:hover .img-insert-btn {
    display: block;
}

/* 添加图片操作提示 */
#imagePreview::before {
    content: "点击图片或加号按钮可将图片插入到编辑区";
    display: block;
    width: 100%;
    color: #6c757d;
    font-size: 12px;
    margin-bottom: 5px;
    text-align: center;
}

/* 编辑器中的图片样式 */
.editor-content img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.loading {
    opacity: 0.5;
    pointer-events: none;
}

.btn-primary:disabled {
    cursor: not-allowed;
}

/* 添加草稿提示样式 */
.draft-status {
    color: #28a745;
    font-size: 14px;
    margin-left: 15px;
    display: inline-block;
}

.draft-actions {
    margin-bottom: 15px;
}

/* 添加编辑器布局样式 */
.editor-container {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    height: 640px;
}

.editor-main {
    flex: 1;
    overflow: auto;
    position: relative;
}

.editor-outline {
    width: 250px;
    border-left: 1px solid #ddd;
    overflow: auto;
    background: #f9f9f9;
    padding: 15px;
}

.outline-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.outline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.outline-item {
    padding: 5px 0;
    cursor: pointer;
    transition: all 0.2s;
}

.outline-item:hover {
    color: #007bff;
}

.outline-item.active {
    color: #007bff;
    font-weight: bold;
}

.outline-h1 { padding-left: 0; }
.outline-h2 { padding-left: 15px; }
.outline-h3 { padding-left: 30px; }
.outline-h4 { padding-left: 45px; }
.outline-h5 { padding-left: 60px; }
.outline-h6 { padding-left: 75px; }

/* 编辑器工具栏样式 */
.editor-toolbar {
    border-bottom: 1px solid #ddd;
    padding: 8px;
    background: #f5f5f5;
    display: flex;
    flex-wrap: wrap;
}

.toolbar-btn {
    margin: 2px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.toolbar-btn:hover {
    background: #f0f0f0;
}

.toolbar-separator {
    margin: 0 5px;
    border-right: 1px solid #ddd;
    height: 20px;
    align-self: center;
}

/* 编辑区域样式 */
.editor-content {
    padding: 20px;
    min-height: 100%;
    outline: none;
}

.editor-content:focus {
    outline: none;
}

/* 标题样式 */
.editor-content h1 { font-size: 28px; margin-top: 20px; margin-bottom: 10px; }
.editor-content h2 { font-size: 24px; margin-top: 18px; margin-bottom: 9px; }
.editor-content h3 { font-size: 20px; margin-top: 16px; margin-bottom: 8px; }
.editor-content h4 { font-size: 18px; margin-top: 14px; margin-bottom: 7px; }
.editor-content h5 { font-size: 16px; margin-top: 12px; margin-bottom: 6px; }
.editor-content h6 { font-size: 14px; margin-top: 10px; margin-bottom: 5px; }

/* 其他内容样式 */
.editor-content p { margin-bottom: 10px; }
.editor-content ul, .editor-content ol { padding-left: 20px; margin-bottom: 10px; }
.editor-content blockquote { border-left: 4px solid #ddd; padding-left: 15px; color: #777; }
.editor-content pre { background: #f5f5f5; padding: 10px; border-radius: 3px; }
.editor-content code { background: #f5f5f5; padding: 2px 4px; border-radius: 3px; }

/* 隐藏顶部的图片上传区域 */
.image-upload-top-area {
    display: none !important;
}

/* 移动端样式调整 */
@media (max-width: 768px) {
    /* 编辑器容器在移动端改为上下布局 */
    .editor-container {
        flex-direction: column;
        height: auto;
        min-height: 400px;
    }
    
    /* 编辑器主区域高度调整 */
    .editor-main {
        height: 400px;
        overflow: auto;
    }
    
    /* 大纲区域在移动端默认隐藏，可通过按钮切换显示 */
    .editor-outline {
        width: 100%;
        height: 300px;
        display: none;
        border-left: none;
        border-top: 1px solid #ddd;
    }
    
    /* 工具栏在移动端优化 */
    .editor-toolbar {
        padding: 4px;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch; /* 添加iOS滚动惯性 */
    }
    
    .toolbar-btn {
        padding: 8px 12px; /* 增大点击区域 */
        margin: 2px;
    }
    
    /* 编辑区域在移动端优化 */
    .editor-content {
        padding: 10px;
        font-size: 16px; /* 增大字体提高可读性 */
        min-height: 300px;
        -webkit-user-select: text; /* 确保iOS可以选择文本 */
        user-select: text;
    }
    
    /* 添加移动端专用的大纲切换按钮 */
    #toggleOutlineBtn {
        display: block;
        width: 100%;
        padding: 8px;
        background: #f8f9fa;
        border: none;
        border-top: 1px solid #ddd;
        text-align: center;
        color: #666;
    }
    
    /* 移动端工具栏按钮图标放大 */
    .toolbar-btn i {
        font-size: 18px;
    }
    
    /* 优化移动端的表单控件 */
    .form-control {
        font-size: 16px; /* 防止iOS自动缩放 */
    }
}

/* 添加图片占位符样式 */
.image-placeholder {
    display: inline-block;
    padding: 2px 8px;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
    border-radius: 4px;
    color: #666;
    font-size: 14px;
    margin: 2px 0;
}
</style>
<div class="row">

    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mb-3 size_18">修改文章—— <?php echo $mod['articletitle'] ?></h4>

                <!-- 添加草稿操作区 -->
                <div class="draft-actions">
                    <button class="btn btn-sm btn-outline-secondary" id="loadDraft">加载草稿</button>
                    <button class="btn btn-sm btn-outline-danger" id="clearDraft">清除草稿</button>
                    <span class="draft-status" id="draftStatus"></span>
                </div>

                <form class="needs-validation" action="littleupda.php" method="post" onsubmit="return check()" novalidate>
                    <div class="form-group mb-3">
                        <label for="validationCustom01">标题</label>
                        <input name="articletitle" type="text" class="form-control" id="validationCustom01"
                               placeholder="请输入标题" value="<?php echo $mod['articletitle'] ?>" required>
                    </div>
                    
                    <!-- 自定义编辑器容器 -->
                    <div class="editor-container">
                        <!-- 编辑器主区域 -->
                        <div class="editor-main">
                            <!-- 工具栏 -->
                            <div class="editor-toolbar">
                                <button type="button" class="toolbar-btn" data-action="undo"><i class="fa fa-undo"></i></button>
                                <button type="button" class="toolbar-btn" data-action="redo"><i class="fa fa-repeat"></i></button>
                                <span class="toolbar-separator"></span>
                                <button type="button" class="toolbar-btn" data-action="h1">H1</button>
                                <button type="button" class="toolbar-btn" data-action="h2">H2</button>
                                <button type="button" class="toolbar-btn" data-action="h3">H3</button>
                                <button type="button" class="toolbar-btn" data-action="h4">H4</button>
                                <span class="toolbar-separator"></span>
                                <button type="button" class="toolbar-btn" data-action="bold"><i class="fa fa-bold"></i></button>
                                <button type="button" class="toolbar-btn" data-action="italic"><i class="fa fa-italic"></i></button>
                                <button type="button" class="toolbar-btn" data-action="underline"><i class="fa fa-underline"></i></button>
                                <span class="toolbar-separator"></span>
                                <button type="button" class="toolbar-btn" data-action="ul"><i class="fa fa-list-ul"></i></button>
                                <button type="button" class="toolbar-btn" data-action="ol"><i class="fa fa-list-ol"></i></button>
                                <span class="toolbar-separator"></span>
                                <button type="button" class="toolbar-btn" data-action="link"><i class="fa fa-link"></i></button>
                                <button type="button" class="toolbar-btn" data-action="image"><i class="fa fa-image"></i></button>
                                <button type="button" class="toolbar-btn" data-action="code"><i class="fa fa-code"></i></button>
                                <div style="flex-grow: 1;"></div>
                                <button type="button" class="toolbar-btn" id="helpBtn"><i class="fa fa-question-circle"></i> 使用说明</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="uploadImageBtn" title="上传图片">
                                    <i class="fa fa-picture-o"></i>
                                </button>
                                <!-- 隐藏的文件上传输入 -->
                                <input type="file" id="imageFileInput" style="display: none;" accept="image/*">
                            </div>
                            
                            <!-- 编辑内容区域 -->
                            <div id="editor-content" class="editor-content" contenteditable="true">
                                <?php echo $mod['articletext']; ?>
                            </div>
                            
                            <!-- 隐藏的Markdown内容 -->
                            <textarea name="articletext" id="markdown-content" style="display: none;"><?php echo htmlspecialchars($mod['articletext']); ?></textarea>
                        </div>
                        
                        <!-- 大纲区域 -->
                        <div class="editor-outline">
                            <div class="outline-title">大纲</div>
                            <ul class="outline-list" id="outline-list"></ul>
                        </div>
                    </div>
                    
                    <!-- 移动端大纲切换按钮 -->
                    <button type="button" id="toggleOutlineBtn" class="d-md-none">
                        <i class="fa fa-list"></i> 显示/隐藏大纲
                    </button>
                    
                    <div class="form-group mb-3 text_right mt-3">
                        <input name="id" value="<?php echo $id ?>" type="hidden">
                        <button class="btn btn-primary" type="button" id="littleupda">保存修改</button>
                    </div>
                </form>

            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col-->
</div>

<!-- 添加帮助模态框 -->
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="helpModalLabel">编辑器使用说明</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4>快捷键</h4>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>快捷键</th>
              <th>功能</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><kbd>Ctrl</kbd> + <kbd>1</kbd> 到 <kbd>Ctrl</kbd> + <kbd>6</kbd></td>
              <td>设置标题级别 (H1-H6)</td>
            </tr>
            <tr>
              <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td>
              <td>粗体</td>
            </tr>
            <tr>
              <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td>
              <td>斜体</td>
            </tr>
            <tr>
              <td><kbd>Ctrl</kbd> + <kbd>K</kbd></td>
              <td>插入链接</td>
            </tr>
          </tbody>
        </table>
        
        <h4>基本操作</h4>
        <ul>
          <li><strong>编辑内容</strong>: 直接在编辑区域中输入文本</li>
          <li><strong>格式化文本</strong>: 使用工具栏按钮或快捷键</li>
          <li><strong>插入图片</strong>: 点击图片按钮或直接拖拽图片到编辑区域</li>
          <li><strong>查看大纲</strong>: 右侧大纲面板会自动显示文章的标题结构</li>
          <li><strong>保存草稿</strong>: 编辑过程中会自动保存，也可以点击"加载草稿"恢复之前的编辑</li>
        </ul>
        
        <h4>图片操作</h4>
        <ul>
          <li><strong>上传图片</strong>: 点击工具栏中的图片按钮上传图片</li>
          <li><strong>粘贴图片</strong>: 可以直接从剪贴板粘贴图片（Ctrl+V）</li>
          <li><strong>拖放图片</strong>: 可以直接将图片文件拖放到编辑区域</li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<head>
    <!-- 使用本地JavaScript文件 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turndown/7.1.2/turndown.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>

<script type="text/javascript">
    $(function() {
        // 获取文章ID
        var articleId = <?php echo $id; ?>;
        
        // 初始化编辑器相关变量
        var $editor = $('#editor-content');
        var $markdownContent = $('#markdown-content');
        var $outlineList = $('#outline-list');
        var lastContent = '';
        var isUpdatingFromMarkdown = false;
        
        // 确保marked和turndownService已定义
        if (typeof marked === 'undefined') {
            console.error("marked库未加载");
            alert("编辑器加载失败：缺少必要的JavaScript库。请刷新页面重试。");
            return;
        }
        
        // 初始化Markdown转换服务
        var turndownService = new TurndownService({
            headingStyle: 'atx',
            codeBlockStyle: 'fenced'
        });
        
        // 初始化编辑器内容 - 修复加载问题
        function initializeEditor() {
            try {
                // 直接从textarea获取原始内容
                var originalContent = $markdownContent.val();
                console.log("原始内容长度:", originalContent ? originalContent.length : 0);
                
                if (originalContent && originalContent.trim() !== '') {
                    console.log("加载原始内容...");
                    // 直接设置编辑器内容
                    $editor.html(marked.parse(originalContent));
                    updateOutline();
                } else {
                    console.warn("原始内容为空，设置默认内容");
                    $editor.html('<p>开始编辑您的文章...</p>');
                    updateMarkdownContent();
                }
                
                console.log("编辑器初始化完成");
            } catch (e) {
                console.error("初始化编辑器内容失败:", e);
                alert("加载文章内容失败: " + e.message);
                
                // 设置一个默认内容，防止编辑器为空
                $editor.html('<p>加载原始内容失败，请重新输入或刷新页面重试。</p>');
                updateMarkdownContent();
            }
        }
        
        // 从Markdown更新编辑器内容
        function updateFromMarkdown(markdown) {
            try {
                isUpdatingFromMarkdown = true;
                
                // 使用marked将Markdown转换为HTML
                var html = marked.parse(markdown);
                
                // 设置编辑器内容
                $editor.html(html);
                
                // 更新隐藏的Markdown内容字段
                $markdownContent.val(markdown);
                
                isUpdatingFromMarkdown = false;
                
                // 更新大纲
                updateOutline();
                
                console.log("从Markdown更新编辑器内容成功");
            } catch (e) {
                console.error("从Markdown更新编辑器内容失败:", e);
                isUpdatingFromMarkdown = false;
            }
        }
        
        // 监听编辑器内容变化
        $editor.on('input', function() {
            if (!isUpdatingFromMarkdown) {
                updateMarkdownContent();
                updateOutline();
                saveDraft();
            }
        });
        
        // 工具栏按钮点击事件
        $('.toolbar-btn').click(function() {
            var action = $(this).data('action');
            executeAction(action);
        });
        
        // 执行编辑操作
        function executeAction(action) {
            // 保存当前选区
            var selection = window.getSelection();
            if (selection.rangeCount === 0) return; // 防止没有选区时出错
            
            var range = selection.getRangeAt(0);
            
            switch(action) {
                case 'undo':
                    document.execCommand('undo');
                    break;
                case 'redo':
                    document.execCommand('redo');
                    break;
                case 'bold':
                    document.execCommand('bold');
                    break;
                case 'italic':
                    document.execCommand('italic');
                    break;
                case 'underline':
                    document.execCommand('underline');
                    break;
                case 'h1':
                case 'h2':
                case 'h3':
                case 'h4':
                case 'h5':
                case 'h6':
                    var level = action.substring(1);
                    document.execCommand('formatBlock', false, action.toUpperCase());
                    break;
                case 'ul':
                    document.execCommand('insertUnorderedList');
                    break;
                case 'ol':
                    document.execCommand('insertOrderedList');
                    break;
                case 'link':
                    var url = prompt('请输入链接地址:', 'http://');
                    if (url) {
                        document.execCommand('createLink', false, url);
                    }
                    break;
                case 'image':
                    $('#imageUpload').click();
                    break;
                case 'code':
                    var codeBlock = document.createElement('pre');
                    var code = document.createElement('code');
                    code.textContent = selection.toString() || '在这里输入代码';
                    codeBlock.appendChild(code);
                    
                    range.deleteContents();
                    range.insertNode(codeBlock);
                    break;
            }
            
            // 更新内容
            updateMarkdownContent();
            updateOutline();
            saveDraft();
            
            // 保持编辑器焦点
            $editor.focus();
        }
        
        // 更新Markdown内容
        function updateMarkdownContent() {
            var html = $editor.html();
            if (html !== lastContent) {
                lastContent = html;
                var markdown = turndownService.turndown(html);
                $markdownContent.val(markdown);
            }
        }
        
        // 更新大纲
        function updateOutline() {
            $outlineList.empty();
            
            // 查找所有标题元素
            var headings = $editor.find('h1, h2, h3, h4, h5, h6');
            
            headings.each(function(index) {
                var $heading = $(this);
                var tagName = $heading.prop('tagName').toLowerCase();
                var text = $heading.text();
                
                // 为标题添加ID以便导航
                var id = 'heading-' + index;
                $heading.attr('id', id);
                
                // 创建大纲项
                var $item = $('<li>')
                    .addClass('outline-item')
                    .addClass('outline-' + tagName)
                    .text(text)
                    .data('target', '#' + id)
                    .click(function() {
                        // 点击大纲项时滚动到对应标题
                        var target = $(this).data('target');
                        var $target = $(target);
                        $('.editor-main').animate({
                            scrollTop: $target.position().top
                        }, 300);
                        
                        // 高亮当前大纲项
                        $('.outline-item').removeClass('active');
                        $(this).addClass('active');
                    });
                
                $outlineList.append($item);
            });
        }
        
        // 修改图片上传处理函数
        $("#imageUpload").change(function() {
            var preview = $("#imagePreview");
            var files = Array.from(this.files);
            
            files.forEach(file => {
                if(file.type.startsWith('image/')) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        // 创建预览缩略图
                        var img = $('<img>').addClass('img-thumbnail mr-2 mb-2')
                                          .css('max-height', '100px')
                                          .attr('src', e.target.result);
                        
                        // 添加删除按钮
                        var deleteBtn = $('<button type="button" class="btn btn-sm btn-danger img-delete-btn">&times;</button>')
                                        .css({
                                            'position': 'absolute',
                                            'top': '0',
                                            'right': '0',
                                            'border-radius': '50%',
                                            'width': '20px',
                                            'height': '20px',
                                            'padding': '0',
                                            'line-height': '1',
                                            'opacity': '0.8'
                                        });
                        
                        // 添加插入按钮
                        var insertBtn = $('<button type="button" class="btn btn-sm btn-primary img-insert-btn"><i class="fa fa-plus"></i></button>')
                                        .css({
                                            'position': 'absolute',
                                            'bottom': '0',
                                            'right': '0',
                                            'border-radius': '50%',
                                            'width': '20px',
                                            'height': '20px',
                                            'padding': '0',
                                            'line-height': '1',
                                            'opacity': '0.8'
                                        });
                        
                        // 创建包装容器
                        var imgContainer = $('<div class="position-relative mr-2 mb-2"></div>')
                                          .append(img)
                                          .append(deleteBtn)
                                          .append(insertBtn);
                        
                        preview.append(imgContainer);
                        
                        // 删除按钮点击事件
                        deleteBtn.click(function(e) {
                            e.stopPropagation();
                            imgContainer.remove();
                        });
                        
                        // 插入按钮点击事件 - 将图片插入到编辑区域
                        insertBtn.click(function(e) {
                            e.stopPropagation();
                            insertImageToEditor(e.target.result, file.name);
                        });
                        
                        // 图片点击事件 - 也可以插入到编辑区域
                        img.click(function() {
                            insertImageToEditor(e.target.result, file.name);
                        });
                        
                        // 保存图片数据到草稿
                        saveDraft();
                    };
                    reader.readAsDataURL(file);
                }
            });
            
            // 清空文件输入，允许重复选择相同文件
            $(this).val('');
        });
        
        // 处理粘贴事件
        $editor.on('paste', async function(e) {
            var clipboardData = e.originalEvent.clipboardData;
            if (!clipboardData || !clipboardData.items) return;
            
            var items = clipboardData.items;
            
            for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf('image') !== -1) {
                    e.preventDefault(); // 阻止默认粘贴行为
                    
                    var blob = items[i].getAsFile();
                    var formData = new FormData();
                    formData.append('editormd-image-file', blob, 'pasted_image_' + Date.now() + '.png');
                    
                    // 生成唯一的占位符ID
                    var loadingId = 'loading_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                    var loadingHtml = `<span id="${loadingId}" class="image-uploading">[图片上传中...]</span>`;
                    
                    // 插入占位符
                    var selection = window.getSelection();
                    var range = selection.getRangeAt(0);
                    var tempDiv = document.createElement('div');
                    tempDiv.innerHTML = loadingHtml;
                    range.insertNode(tempDiv.firstChild);
                    range.collapse(false);
                    
                    try {
                        // 上传图片
                        const response = await $.ajax({
                            url: 'upload.php',
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false
                        });
                        
                        const result = typeof response === 'string' ? JSON.parse(response) : response;
                        
                        if (result.success === 1) {
                            // 查找并替换特定的占位符
                            var placeholder = document.getElementById(loadingId);
                            if (placeholder) {
                                // 创建图片元素
                                var img = document.createElement('img');
                                img.src = result.url;
                                img.alt = "上传的图片";
                                
                                // 替换占位符
                                placeholder.parentNode.replaceChild(img, placeholder);
                                
                                // 保存草稿
                                setTimeout(saveDraft, 100);
                            }
                        } else {
                            // 上传失败，替换特定的占位符为错误提示
                            var placeholder = document.getElementById(loadingId);
                            if (placeholder) {
                                placeholder.parentNode.replaceChild(
                                    document.createTextNode('[图片上传失败]'),
                                    placeholder
                                );
                            }
                            console.error('图片上传失败:', result.message);
                        }
                    } catch (error) {
                        // 处理上传错误
                        var placeholder = document.getElementById(loadingId);
                        if (placeholder) {
                            placeholder.parentNode.replaceChild(
                                document.createTextNode('[图片上传失败]'),
                                placeholder
                            );
                        }
                        console.error('图片上传错误:', error);
                    }
                }
            }
        });
        
        // 提取插入图片到编辑器的功能为单独函数
        function insertImageToEditor(src, alt) {
            var imgElement = document.createElement('img');
            imgElement.src = src;
            imgElement.alt = alt;
            imgElement.style.maxWidth = '100%';
            imgElement.style.height = 'auto';
            
            var selection = window.getSelection();
            if (selection.rangeCount > 0) {
                var range = selection.getRangeAt(0);
                range.deleteContents();
                range.insertNode(imgElement);
                
                // 在图片后添加一个换行
                var br = document.createElement('br');
                imgElement.parentNode.insertBefore(br, imgElement.nextSibling);
                
                // 将光标移动到图片后面
                range = document.createRange();
                range.setStartAfter(br);
                range.collapse(true);
                selection.removeAllRanges();
                selection.addRange(range);
            } else {
                // 如果没有选区，则添加到编辑器末尾
                $editor.append(imgElement);
                $editor.append('<br>');
            }
            
            // 更新内容
            updateMarkdownContent();
            updateOutline();
            saveDraft();
        }
        
        // 添加拖放图片功能
        $(document).ready(function() {
            // 获取编辑器元素
            var editorContent = document.getElementById('editor-content');
            
            // 阻止默认拖放行为
            editorContent.addEventListener('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                this.classList.add('dragover');
            });
            
            editorContent.addEventListener('dragleave', function(e) {
                e.preventDefault();
                e.stopPropagation();
                this.classList.remove('dragover');
            });
            
            // 处理拖放
            editorContent.addEventListener('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                this.classList.remove('dragover');
                
                // 获取拖放的文件
                var files = e.dataTransfer.files;
                if (files.length === 0) return;
                
                // 检查是否是图片
                var file = files[0];
                if (!file.type.match('image.*')) {
                    alert('请拖放图片文件');
                    return;
                }
                
                // 显示加载状态
                var loadingIndicator = $('<div class="loading-indicator" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.8);padding:20px;border-radius:5px;z-index:9999;"><i class="fa fa-spinner fa-spin fa-2x"></i> 图片上传中...</div>');
                $('body').append(loadingIndicator);
                
                // 创建FormData对象
                var formData = new FormData();
                formData.append('editormd-image-file', file);
                
                // 使用AJAX上传图片
                $.ajax({
                    url: 'upload.php',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(response) {
                        loadingIndicator.remove();
                        
                        if (response.success === 1) {
                            // 获取图片URL
                            var imgUrl = response.url;
                            console.log("图片上传成功: " + imgUrl);
                            
                            // 创建图片元素
                            var img = document.createElement('img');
                            img.src = imgUrl;
                            img.style.maxWidth = '100%';
                            
                            try {
                                // 尝试获取当前选区
                                var selection = window.getSelection();
                                
                                // 检查是否有选区
                                if (selection.rangeCount > 0) {
                                    // 有选区，在选区位置插入图片
                                    var range = selection.getRangeAt(0);
                                    range.insertNode(img);
                                    
                                    // 将光标移到图片后面
                                    range.setStartAfter(img);
                                    range.setEndAfter(img);
                                    selection.removeAllRanges();
                                    selection.addRange(range);
                                } else {
                                    // 没有选区，在编辑器末尾插入图片
                                    editorContent.appendChild(img);
                                    
                                    // 创建新的选区在图片后面
                                    var range = document.createRange();
                                    range.setStartAfter(img);
                                    range.collapse(true);
                                    selection.removeAllRanges();
                                    selection.addRange(range);
                                }
                                
                                // 触发内容更新
                                $(editorContent).trigger('input');
                                
                                console.log("图片已成功插入编辑器");
                            } catch (e) {
                                // 如果出现错误，简单地将图片添加到编辑器末尾
                                console.error("插入图片时出错:", e);
                                editorContent.appendChild(img);
                                $(editorContent).trigger('input');
                            }
                        } else {
                            alert("图片上传失败: " + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        loadingIndicator.remove();
                        alert("图片上传失败: " + error);
                        console.error("上传错误: ", error);
                    }
                });
            });
            
            // 添加拖放提示样式
            $('<style>.dragover { border: 2px dashed #1890ff !important; background-color: rgba(24, 144, 255, 0.05) !important; }</style>').appendTo('head');
        });
        
        // 修改保存草稿函数
        function saveDraft() {
            try {
                // 检查是否还有正在上传的图片
                var uploadingImages = $editor.find('.image-uploading');
                if (uploadingImages.length > 0) {
                    console.log('检测到正在上传的图片，延迟保存草稿');
                    setTimeout(saveDraft, 500);
                    return;
                }

                var content = $editor.html();
                var title = $("#validationCustom01").val();
                var author = $("#example-select").val();
                
                var draftData = {
                    content: content,
                    title: title,
                    author: author,
                    timestamp: new Date().toISOString()
                };
                
                // 使用文章ID作为草稿的唯一标识
                localStorage.setItem('editDraft_' + articleId, JSON.stringify(draftData));
                
                // 更新保存状态
                var now = new Date();
                var timeStr = now.getHours() + ':' + 
                             (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
                $("#draftStatus").text('修改草稿已保存 (' + timeStr + ')');
                
                console.log('修改草稿已保存');
            } catch (e) {
                console.error("保存修改草稿失败:", e);
            }
        }
        
        // 加载草稿
        function loadDraft() {
            try {
                var draftData = localStorage.getItem('editDraft_' + articleId);
                if (draftData) {
                    draftData = JSON.parse(draftData);
                    
                    // 填充表单数据
                    $("#validationCustom01").val(draftData.title);
                    
                    // 直接加载内容，包括图片
                    if (draftData.content) {
                        $editor.html(draftData.content);
                        updateMarkdownContent();
                    }
                    
                    $("#example-select").val(draftData.author);
                    
                    // 更新状态提示
                    $("#draftStatus").text('修改草稿已加载');
                    
                    // 只在成功时显示提示
                    alert("修改草稿已恢复！");
                    return true;
                } else {
                    alert("没有找到保存的修改草稿！");
                    return false;
                }
            } catch (e) {
                console.log("加载修改草稿时出现非致命错误:", e);
                return true;
            }
        }
        
        // 清除草稿
        function clearDraft() {
            if (confirm("确定要清除保存的修改草稿吗？")) {
                try {
                    // 使用"editDraft_"前缀清除修改草稿
                    localStorage.removeItem('editDraft_' + articleId);
                    $("#draftStatus").text('修改草稿已清除');
                    alert("修改草稿已清除！");
                } catch (e) {
                    console.error("清除草稿失败:", e);
                    alert("清除草稿失败: " + e.message);
                }
            }
        }
        
        // 确保页面完全加载后再初始化编辑器
        $(document).ready(function() {
            console.log("文档加载完成，准备初始化编辑器");
            setTimeout(function() {
                initializeEditor();
                tryLoadDraft();
            }, 500);
        });
        
        // 设置自动保存定时器（每30秒）
        setInterval(saveDraft, 30000);
        
        // 加载草稿按钮事件
        $("#loadDraft").click(function() {
            loadDraft();
        });
        
        // 清除草稿按钮事件
        $("#clearDraft").click(function() {
            clearDraft();
        });
        
        // 监听标题输入变化
        $("#validationCustom01").on('input', function() {
            saveDraft();
        });
        
        // 添加键盘快捷键
        $editor.on('keydown', function(e) {
            // Ctrl+B: 粗体
            if (e.ctrlKey && e.keyCode === 66) {
                e.preventDefault();
                executeAction('bold');
            }
            // Ctrl+I: 斜体
            else if (e.ctrlKey && e.keyCode === 73) {
                e.preventDefault();
                executeAction('italic');
            }
            // Ctrl+1-6: 标题
            else if (e.ctrlKey && e.keyCode >= 49 && e.keyCode <= 54) {
                e.preventDefault();
                var level = e.keyCode - 48; // 1-6
                executeAction('h' + level);
            }
            // Ctrl+K: 链接
            else if (e.ctrlKey && e.keyCode === 75) {
                e.preventDefault();
                executeAction('link');
            }
        });
        
        // 修改更新按钮点击事件
        $("#littleupda").click(async function(e) {
            e.preventDefault();
            
            if(!check()) return;
            
            try {
                // 禁用提交按钮
                $("#littleupda").prop('disabled', true).text('更新中...');
                
                // 确保所有图片都已上传完成
                var uploadingImages = $editor.find('.image-uploading');
                if (uploadingImages.length > 0) {
                    alert('还有图片正在上传，请等待上传完成后再提交');
                    $("#littleupda").prop('disabled', false).text('更新');
                    return;
                }
                
                // 更新隐藏的 Markdown 内容
                updateMarkdownContent();
                
                var formData = new FormData($("form")[0]);
                
                $.ajax({
                    url: "littleupda.php",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if(response == "1") {
                            // 更新成功后清除草稿
                            try {
                                localStorage.removeItem('editDraft_' + articleId);
                            } catch (e) {
                                console.error("清除草稿失败:", e);
                            }
                            
                            alert("更新成功！");
                            window.location.href = "littleSet.php";
                        } else {
                            alert("更新失败，请重试！");
                            // 重新启用提交按钮
                            $("#littleupda").prop('disabled', false).text('更新');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Error:", error);
                        alert("更新失败：" + error);
                        // 重新启用提交按钮
                        $("#littleupda").prop('disabled', false).text('更新');
                    }
                });
            } catch (error) {
                alert(error.message);
                $("#littleupda").prop('disabled', false).text('更新');
            }
        });
        
        // 表单验证函数
        function check() {
            let title = document.getElementsByName('articletitle')[0].value.trim();
            let text = $markdownContent.val().trim();
            
            if (title.length == 0) {
                alert("文章标题不能为空");
                return false;
            } else if (text.length == 0) {
                alert("文章内容不能为空");
                return false;
            }
            return true;
        }
        
        // 页面关闭前保存草稿
        window.addEventListener('beforeunload', function(e) {
            saveDraft();
        });
        
        // 帮助按钮点击事件
        $("#helpBtn").click(function() {
            $("#helpModal").modal('show');
        });

        // 图片上传处理
        $(function() {
            // 确保隐藏的文件上传表单存在
            if ($('#imageUploadForm').length === 0) {
                $('body').append('<form id="imageUploadForm" style="display:none;"><input type="file" id="imageFileInput" name="editormd-image-file" accept="image/*"></form>');
            }
            
            // 点击上传按钮时触发文件选择
            $('#uploadImageBtn').click(function(e) {
                e.preventDefault();
                $('#imageFileInput').click();
            });
            
            // 处理文件选择
            $('#imageFileInput').change(function() {
                var file = this.files[0];
                if (!file) return;
                
                // 检查文件类型
                if (!file.type.match('image.*')) {
                    alert('请选择图片文件');
                    return;
                }
                
                // 显示加载状态
                var loadingIndicator = $('<div class="loading-indicator" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.8);padding:20px;border-radius:5px;z-index:9999;"><i class="fa fa-spinner fa-spin fa-2x"></i> 图片上传中...</div>');
                $('body').append(loadingIndicator);
                
                // 创建FormData对象
                var formData = new FormData();
                formData.append('editormd-image-file', file);
                
                // 使用AJAX上传图片
                $.ajax({
                    url: 'upload.php',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function(response) {
                        loadingIndicator.remove();
                        
                        if (response.success === 1) {
                            // 获取图片URL
                            var imgUrl = response.url;
                            console.log("图片上传成功: " + imgUrl);
                            
                            // 创建图片元素
                            var img = document.createElement('img');
                            img.src = imgUrl;
                            img.style.maxWidth = '100%';
                            
                            // 获取编辑器元素
                            var editorContent = document.getElementById('editor-content');
                            
                            try {
                                // 尝试获取当前选区
                                var selection = window.getSelection();
                                
                                // 检查是否有选区
                                if (selection.rangeCount > 0) {
                                    // 有选区，在选区位置插入图片
                                    var range = selection.getRangeAt(0);
                                    range.insertNode(img);
                                    
                                    // 将光标移到图片后面
                                    range.setStartAfter(img);
                                    range.setEndAfter(img);
                                    selection.removeAllRanges();
                                    selection.addRange(range);
                                } else {
                                    // 没有选区，在编辑器末尾插入图片
                                    editorContent.appendChild(img);
                                    
                                    // 创建新的选区在图片后面
                                    var range = document.createRange();
                                    range.setStartAfter(img);
                                    range.collapse(true);
                                    selection.removeAllRanges();
                                    selection.addRange(range);
                                }
                                
                                // 触发内容更新
                                $(editorContent).trigger('input');
                                
                                console.log("图片已成功插入编辑器");
                            } catch (e) {
                                // 如果出现错误，简单地将图片添加到编辑器末尾
                                console.error("插入图片时出错:", e);
                                editorContent.appendChild(img);
                                $(editorContent).trigger('input');
                            }
                        } else {
                            alert("图片上传失败: " + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        loadingIndicator.remove();
                        alert("图片上传失败: " + error);
                        console.error("上传错误: ", error);
                    }
                });
            });
            
            // 支持拖放上传图片
            var editorContent = document.getElementById('editor-content');
            
            editorContent.addEventListener('dragover', function(e) {
                e.preventDefault();
                e.stopPropagation();
                this.classList.add('dragover');
            });
            
            editorContent.addEventListener('dragleave', function(e) {
                e.preventDefault();
                e.stopPropagation();
                this.classList.remove('dragover');
            });
            
            editorContent.addEventListener('drop', function(e) {
                e.preventDefault();
                e.stopPropagation();
                this.classList.remove('dragover');
                
                var files = e.dataTransfer.files;
                if (files.length > 0) {
                    var file = files[0];
                    
                    // 检查是否是图片
                    if (!file.type.match('image.*')) {
                        alert('请拖放图片文件');
                        return;
                    }
                    
                    // 检查文件大小
                    if (file.size > 5 * 1024 * 1024) { // 5MB
                        alert('图片大小不能超过5MB');
                        return;
                    }
                    
                    // 显示加载状态
                    var loadingIndicator = $('<div class="loading-indicator" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.8);padding:20px;border-radius:5px;z-index:9999;"><i class="fa fa-spinner fa-spin fa-2x"></i> 图片上传中...</div>');
                    $('body').append(loadingIndicator);
                    
                    // 创建FormData对象 - 使用与upload.php兼容的参数名
                    var formData = new FormData();
                    formData.append('editormd-image-file', file);
                    
                    // 使用AJAX上传图片 - 使用现有的upload.php
                    $.ajax({
                        url: 'upload.php',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        success: function(response) {
                            loadingIndicator.remove();
                            
                            if (response.success === 1) {
                                // 创建图片元素
                                var img = document.createElement('img');
                                img.src = response.url;
                                img.style.maxWidth = '100%';
                                
                                // 插入图片到编辑器
                                insertImageToEditor(img);
                                
                                console.log("图片上传成功: " + response.url);
                            } else {
                                alert("图片上传失败: " + response.message);
                                console.error("图片上传失败: ", response.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            loadingIndicator.remove();
                            alert("图片上传失败: " + error);
                            console.error("图片上传错误: ", error);
                        }
                    });
                }
            });
        });

        // 确保蓝色圈出的按钮正常工作
        $(document).ready(function() {
            // 获取蓝色圈出的按钮
            var workingImageBtn = $('.editor-toolbar').find('.fa-image').parent();
            
            // 如果找不到，可能是使用其他图标类
            if (workingImageBtn.length === 0) {
                workingImageBtn = $('.editor-toolbar').find('[title*="图片"]').last();
            }
            
            // 确保按钮可见
            workingImageBtn.show();
            
            // 添加明显的样式，使其更容易被发现
            workingImageBtn.css({
                'background-color': '#e6f7ff',
                'border-color': '#1890ff',
                'color': '#1890ff'
            });
            
            // 添加提示文本
            workingImageBtn.attr('title', '点击这里上传图片');
        });

        // 检测是否为移动设备
        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        
        if (isMobile) {
            // 移动端初始化
            initMobileEditor();
        }
        
        function initMobileEditor() {
            // 处理大纲切换
            $('#toggleOutlineBtn').click(function() {
                $('.editor-outline').slideToggle();
                updateOutline(); // 切换显示时更新大纲
            });
            
            // 优化移动端工具栏
            var $toolbar = $('.editor-toolbar');
            var $buttons = $toolbar.find('.toolbar-btn');
            
            // 确保工具栏可以水平滚动
            $toolbar.css('overflow-x', 'auto');
            
            // 添加触摸滑动支持
            var touchStartX = 0;
            var scrollLeft = 0;
            
            $toolbar.on('touchstart', function(e) {
                touchStartX = e.originalEvent.touches[0].pageX - $toolbar.offset().left;
                scrollLeft = $toolbar.scrollLeft();
            });
            
            $toolbar.on('touchmove', function(e) {
                if (!touchStartX) return;
                
                var touchX = e.originalEvent.touches[0].pageX - $toolbar.offset().left;
                var walk = (touchX - touchStartX);
                $toolbar.scrollLeft(scrollLeft - walk);
            });
            
            $toolbar.on('touchend', function() {
                touchStartX = null;
            });
            
            // 优化编辑区域
            var $editor = $('#editor-content');
            
            // 增加编辑区域的可点击范围
            $editor.css('min-height', '300px');
            
            // 添加软键盘弹出时的处理
            var originalHeight = window.innerHeight;
            window.addEventListener('resize', function() {
                if (window.innerHeight < originalHeight) {
                    // 软键盘弹出，调整编辑器高度
                    $('.editor-main').css('height', (window.innerHeight - 150) + 'px');
                    
                    // 滚动到编辑区域
                    setTimeout(function() {
                        $editor[0].scrollIntoView({ behavior: 'smooth' });
                    }, 100);
                } else {
                    // 软键盘收起，恢复原始高度
                    $('.editor-main').css('height', '400px');
                }
            });
            
            // 优化图片上传体验
            $('#uploadImageBtn').css({
                'padding': '10px',
                'margin': '5px',
                'font-size': '16px'
            });
            
            // 修复iOS上的点击延迟
            document.addEventListener('touchstart', function() {}, false);
            
            // 防止双击缩放
            document.addEventListener('touchmove', function(e) {
                if (e.scale !== 1) {
                    e.preventDefault();
                }
            }, { passive: false });
            
            // 优化表单提交按钮
            $('#littleupda').css({
                'padding': '12px 24px',
                'font-size': '16px'
            });
        }
        
        // 监听设备方向变化
        window.addEventListener('orientationchange', function() {
            if (isMobile) {
                setTimeout(function() {
                    // 重新计算编辑器高度
                    var height = window.innerHeight - 150;
                    $('.editor-main').css('height', height + 'px');
                    
                    // 更新大纲
                    updateOutline();
                }, 300);
            }
        });

        // 处理提交前的图片上传
        async function uploadPastedImages() {
            var $content = $editor.html();
            var base64Regex = /<img[^>]*src="(data:image\/[^"]+)"[^>]*>/g;
            var match;
            var uploadPromises = [];

            // 收集所有需要上传的base64图片
            while ((match = base64Regex.exec($content)) !== null) {
                let base64Data = match[1];
                // 创建上传Promise
                let uploadPromise = new Promise((resolve, reject) => {
                    // 将base64转换为文件
                    var byteString = atob(base64Data.split(',')[1]);
                    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
                    var ab = new ArrayBuffer(byteString.length);
                    var ia = new Uint8Array(ab);
                    for (var i = 0; i < byteString.length; i++) {
                        ia[i] = byteString.charCodeAt(i);
                    }
                    var blob = new Blob([ab], {type: mimeString});
                    var file = new File([blob], "pasted_image_" + Date.now() + ".png", {type: "image/png"});

                    // 创建FormData
                    var formData = new FormData();
                    formData.append('editormd-image-file', file);

                    // 上传图片
                    $.ajax({
                        url: 'upload.php',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            try {
                                response = typeof response === 'string' ? JSON.parse(response) : response;
                                if (response.success === 1) {
                                    resolve({
                                        base64: base64Data,
                                        url: response.url
                                    });
                                } else {
                                    reject('图片上传失败：' + response.message);
                                }
                            } catch (e) {
                                reject('图片上传返回数据解析失败');
                            }
                        },
                        error: function(xhr, status, error) {
                            reject('图片上传失败：' + error);
                        }
                    });
                });
                uploadPromises.push(uploadPromise);
            }

            // 等待所有图片上传完成
            try {
                const results = await Promise.all(uploadPromises);
                // 替换所有base64图片为上传后的URL
                results.forEach(result => {
                    $content = $content.replace(result.base64, result.url);
                });
                return $content;
            } catch (error) {
                console.error('图片上传失败：', error);
                throw new Error('有图片上传失败，请重试');
            }
        }
    });
</script>

<?php
include_once 'Footer.php';
?>

</body>
</html>